<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { arrayGroupBy } from '../../../lib/utils'
import store from '@/store'
export default {
    name: 'BarBaseChart',
    components: {},
    extends: BaseChartVue,
    props: {
        color: {
            type: Array,
            default: () => ['#0ba3ff', '#00d386', '#ff7944', '#b190ff'],
        },
        colorArea: {
            type: Array,
            default: () => ['#873aff', '#0076fc', '#ffc744', '#6d50ff'],
        },
        dataList: {
            type: Array,
            default: () => {
                return []
            },
        },
        value: {
            type: String,
            default: () => '',
        }
    },
    data() {
        return {}
    },
    computed: {},
    created() { },
    mounted() {
    },
    methods: {
        makeOptions() {
            let dataList = [{
                name: `大庆油田、大庆石化\n大庆炼化、大庆钻探`,
                label: {
                    normal: {
                        backgroundColor: '#2196f3',
                        fontSize: 18,
                        fontWeight: 900
                    }
                },
                children: [{
                    name: "管理部门",
                    children: [
                        { name: "党委办公室" },
                        { name: "党委组织部（人事部）", children: [{ name: "人事服务中心" }] },
                        { name: "党委宣传部" },
                        { name: "规划计划部" },
                        { name: "财务资产部" },
                    ]
                }, {
                    name: "二级单位",
                    children: [
                        { name: "第一采油厂" },
                        { name: "第二采油厂" },
                        { name: "第三采油厂" },
                        { name: "第四采油厂" },
                        { name: "第五采油厂" },
                    ]
                }]
            }];
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                legend: {
                    show: false
                },
                series: [{
                    type: 'tree',
                    name: '大庆油田',
                    data: dataList,
                    label: {
                        normal: {
                            position: 'center',
                            verticalAlign: 'middle',
                            align: 'left',
                            backgroundColor: '#0288d1',
                            color: '#fff',
                            padding: 3,
                            formatter: [
                                '{box|{b}}'
                            ].join('\n'),
                            rich: {
                                box: {
                                    height: 22,
                                    color: '#fff',
                                    fontSize: 13,
                                    padding: [0, 5],
                                    align: 'center'
                                }
                            }
                        }
                    },
                    lineStyle: {
                        color: '#2699f3'
                    },
                    leaves: {
                        label: {
                            normal: {
                                position: 'center',
                                verticalAlign: 'middle',
                                align: 'left',
                                backgroundColor: '#0288d1',
                                formatter: [
                                    '{box|{b}}'
                                ].join('\n'),
                                rich: {
                                    box: {
                                        height: 22,
                                        color: '#fff',
                                        fontSize: 13,
                                        padding: [0, 5],
                                        align: 'center'
                                    }
                                }
                            }
                        }
                    },
                    expandAndCollapse: true,
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
                ]
            }
            let that = this
            this.baseChart.getZr().on('click', function (params) {
                let pointInPixel = [params.offsetX, params.offsetY];
                if (that.baseChart.containPixel('grid', pointInPixel)) {
                  let xIndex = that.baseChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0];
                //   let opt = option.xAxis.data[xIndex]
                //   that.$router.push({ path: '/warnTable', query: { cityCode: opt, providerType: that.value, loginCode } });
                }

            });
            return option
        },
    },
}
</script>